<template>
	<div class="panel-wrapper row">
		<div class="label row items-center">
			<el-tooltip
				content="车辆入场/出场时识别到（3~4位）车牌在本规则车牌号范围，将进行预警"
				placement="right"
				effect="light"
			>
				<img class="tip-img" src="@/assets/images/home/question.png" alt="" />
			</el-tooltip>

			<span>模糊匹配车牌：</span>
		</div>
		<div class="box">
			<TagBox v-bind="$attrs" :isOpenWarning="isOpenWarning" />
			<div class="opr-line row items-center">
				<el-input
					:disabled="!isOpenWarning"
					ref="InputRef"
					v-model="inputValue"
					style="width: 200px"
					size="small"
					maxlength="4"
					placeholder="请输入3-4位模糊车牌"
				/>
				<el-button
					class="p-button"
					size="small"
					@click="addCode"
					:disabled="!isOpenWarning"
				>
					+ 模糊车牌
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import TagBox from "@/components/TagBox/index.vue";
import { validatePartLicensePlate } from "@/utils/common.ts";
import { ElMessage } from "element-plus";

import { ref } from "vue";
const emit = defineEmits(["addCode"]);
const props = defineProps({
	isOpenWarning: {
		type: Boolean,
		default: () => true,
	},
});
const inputValue = ref("");
const addCode = () => {
	if (!validatePartLicensePlate(inputValue.value)) {
		ElMessage({
			message: "请输入3-4位模糊车牌",
			type: "warning",
		});
		return;
	}
	emit("addCode", inputValue.value);
	inputValue.value = "";
};
</script>

<style scoped lang="scss">
.panel-wrapper {
	margin-top: 24px;
	.tip-img {
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
	.label {
		width: 120px;
		margin-right: 8px;
	}

	.opr-line {
		margin-top: 12px;
		.p-button {
			margin-left: 12px;
		}
	}
}
</style>
